<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>购物车 - ${systemName}</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/client.css">
    <style>

        .cart-card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }

        .cart-item:hover {
            background-color: #f8f9fa;
        }


        .total-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: #dc3545;
        }

        /* Modal styles */
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
        }

        .modal-title {
            font-weight: 600;
            color: #2c3e50;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
        }


        .form-check-input {
            width: 1.25rem;
            height: 1.25rem;
            margin-left: -2.5rem;
            margin-top: 0.15rem;
        }
    </style>
</head>
<body>
<jsp:include page="/WEB-INF/views/client/common/nav.jsp"/>
<div class="container mt-4 mb-5 flex-grow-1">
    <div class="row">
        <div class="col-md-8">
            <div class="card cart-card mb-4">
                <%--                <div class="card-header bg-white d-flex justify-content-between align-items-center">--%>
                <%--                    <div class="form-check select-all-checkbox">--%>
                <%--                        <input class="form-check-input" type="checkbox" id="selectAll">--%>
                <%--                        <label class="form-check-label" for="selectAll">全选</label>--%>
                <%--                    </div>--%>
                <%--                    <div>--%>
                <%--                        <button class="btn btn-sm btn-outline-danger" id="deleteSelected">删除选中</button>--%>
                <%--                    </div>--%>
                <%--                </div>--%>
                <div class="card-body p-0">
                    <c:choose>
                        <c:when test="${not empty cartList}">
                            <c:forEach items="${cartList}" var="cart">
                                <div class="cart-item p-3 border-bottom">
                                    <div class="d-flex align-items-center">
                                        <!-- 修改后的单选框部分 -->
                                        <div class="form-check me-3">
                                            <form action="${pageContext.request.contextPath}/client/cart?method=select&cartId=${cart.id}&selected=${cart.selected+1}"
                                                  method="post" style="display: inline;">
                                                <input type="hidden" name="cartId" value="${cart.id}">
                                                <input class="form-check-input item-checkbox"
                                                       type="checkbox"
                                                       onchange="this.form.submit()"
                                                       <c:if test="${cart.selected == 1}">checked</c:if>>
                                            </form>
                                        </div>
                                        <img
                                        <c:choose>
                                        <c:when test="${cart.product.image != null && cart.product.image.contains('.')}">
                                                src="${pageContext.request.contextPath}/image/product/${cart.product.image}"
                                        </c:when>
                                        <c:otherwise>
                                                src="${pageContext.request.contextPath}/public?method=image&id=${cart.product.image}"
                                        </c:otherwise>
                                        </c:choose>

                                                class="img-thumbnail me-3"
                                                style="width: 80px; height: 100px; object-fit: contain;"
                                                alt="${cart.product.name}">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">${cart.product.name}</h6>
<%--                                            <small class="text-muted">${cart.product.description}</small>--%>
                                        </div>
                                        <div class="text-danger fw-bold me-3">¥${cart.product.price}</div>
                                        <div class="d-flex align-items-center me-3">
                                            <a class="btn btn-sm btn-outline-secondary quantity-minus"
                                               href="${pageContext.request.contextPath}/client/cart?method=update&cartId=${cart.id}&quantity=${cart.quantity-1}"
                                               data-cart-id="${cart.id}">-</a>
                                            <div class="quantity-display mx-2 px-2 py-1 bg-light rounded"
                                                 style="min-width: 30px; text-align: center;">
                                                    ${cart.quantity}
                                            </div>
                                            <a class="btn btn-sm btn-outline-secondary quantity-plus"
                                               href="${pageContext.request.contextPath}/client/cart?method=update&cartId=${cart.id}&quantity=${cart.quantity+1}"
                                               data-cart-id="${cart.id}">+</a>
                                        </div>
                                        <a class="btn btn-sm btn-outline-danger delete-item"
                                           href="${pageContext.request.contextPath}/client/cart?method=delete&cartId=${cart.id}"
                                           data-cart-id="${cart.id}">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </div>
                                </div>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <div class="text-center py-5">
                                <i class="bi bi-cart-x" style="font-size: 3rem; color: #6c757d;"></i>
                                <p class="mt-3">购物车空空如也</p>
                                <a href="${pageContext.request.contextPath}/" class="btn btn-primary mt-2">去逛逛</a>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card cart-card sticky-top" style="top: 20px;">
                <div class="card-header bg-white">
                    <h5 class="mb-0">订单摘要</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>商品总价</span>
                        <span class="total-price">¥${totalPrice}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>运费</span>
                        <span>¥0.00</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="fw-bold">应付总额</span>
                        <span class="total-price">¥${totalPrice}</span>
                    </div>
                    <%--                    <a class="btn btn-danger w-100 py-2" href="${pageContext.request.contextPath}/order?m=create">去结算 (<span >${selectedQuantity}</span>)</a>--%>
                    <c:choose>
                        <%--                        <c:when test="${selectedQuantity > 0}">--%>
                        <%--                            <a class="btn btn-danger w-100 py-2" href="${pageContext.request.contextPath}/order?m=create">--%>
                        <%--                                去结算 (<span>${selectedQuantity}</span>)--%>
                        <%--                            </a>--%>
                        <%--                        </c:when>--%>
                        <%--                        <c:otherwise>--%>
                        <%--                            <button class="btn btn-secondary w-100 py-2" disabled>--%>
                        <%--                                去结算 (<span>0</span>)--%>
                        <%--                            </button>--%>
                        <%--                        </c:otherwise>--%>
                        <c:when test="${selectedQuantity > 0}">
                            <button type="button" class="btn btn-danger w-100 py-2" data-bs-toggle="modal"
                                    data-bs-target="#checkoutModal">
                                去结算 (<span>${selectedQuantity}</span>)
                            </button>
                        </c:when>
                        <c:otherwise>
                            <button class="btn btn-secondary w-100 py-2" disabled>
                                去结算 (<span>0</span>)
                            </button>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/WEB-INF/views/client/common/footer.jsp"/>

<div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="checkoutModalLabel">确认订单信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="checkoutForm" action="${pageContext.request.contextPath}/client/order?method=create" method="post">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="mb-3">收货信息</h6>

                            <div class="mb-3">
                                <label for="recipientName" class="form-label">收货人</label>
                                <input type="text" class="form-control" id="recipientName" name="name"
                                       value="${name}" required
                                       pattern="[\u4e00-\u9fa5a-zA-Z]{2,20}"
                                       title="请输入2-20个字符的中文或英文姓名">
                            </div>

                            <div class="mb-3">
                                <label for="recipientPhone" class="form-label">联系电话</label>
                                <input type="tel" class="form-control" id="recipientPhone" name="phone"
                                       value="${phone}"
                                       required pattern="1[3-9]\d{9}"
                                       title="请输入有效的11位手机号码">
                            </div>

                            <div class="mb-3">
                                <label for="recipientAddress" class="form-label">收货地址</label>
                                <input class="form-control" id="recipientAddress" name="address"
                                       value="${address}"
                                       title="请输入10-100个字符的详细地址"></input>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h6 class="mb-3">订单摘要</h6>
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>商品总价</span>
                                        <span class="text-danger fw-bold">¥${totalPrice}</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-3">
                                        <span>运费</span>
                                        <span>¥0.00</span>
                                    </div>
                                    <hr>
                                    <div class="d-flex justify-content-between mb-3">
                                        <span class="fw-bold">应付总额</span>
                                        <span class="text-danger fw-bold fs-5">¥${totalPrice}</span>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">确认下单</button>
                    <%--                    <a class="btn btn-danger" type="submit" href="${pageContext.request.contextPath}/order?m=create&name=${name}&phone=${phone}&address=${address}">确定下单</a>--%>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
